<template>
  <div class="person">
    <h2>姓名:{{ username }}</h2>
    <h2>年龄:{{ age }}</h2>
    <button @click="addAge">年龄加1</button>
    <button @click="subAge">年龄减1</button>
    <button @click="changeName">修改姓名</button>
    <!--输入姓名,实现名字的修改
      使用 v-model 指令在表单 < input>、< textarea> 及 < select> 元元素上创建双向数据绑定。它
      会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它
      负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
    -->
    <input type="text" v-model="newusername" placeholder="请输入新的姓名">
    <h1 v-bind:title="message">显示信息</h1>
    <h1 :title="message">我是标题</h1>
  </div>
</template>
<script lang="ts">
 import { ref } from "vue";
  console.log("Person.vue组件被加载了");
  export default {
    name:"Person",
    setup(){
       // 数据，原来写在data中（注意：此时的name、age、phone等数据都不是响应式数据）
       let username= ref("张三") //ref 一个`RefImpl`的实例对象，
       // 简称`ref对象`或`ref`，`ref`对象的`value`**属性是响应式的**。
       // 对于`let name = ref('张三')`来说，`name`不是响应式的，`name.value`是响应式的。
       let age= ref(20) //ref 一个`RefImpl`的实例对象，简称`ref对象`或`ref`，`ref`对象的`value`**属性是响应式的**。
       let newusername= ref("")
       let message=ref("鼠标移到我上方显示的提示信息")
      //方法,原来写在methods中
      function addAge(){
        age.value=age.value+1
        console.log("年龄加1")
        console.log(age)
      }
      function subAge(){
        age.value=age.value-1//如果使用age++，则age不是响应式数据了，因为++操作符不是响应式操作符
        console.log("年龄减1")
        console.log(age)
      }
      function changeName(){
        if (newusername.value.trim() !== ""){
            username.value=newusername.value.trim()//修改了用户的姓名
            console.log("修改姓名成功")
            newusername.value=""//清空输入框的内容
        }else{
          username.value="请输入新的姓名"//输入框内容为空时，显示默认提示信息
        }
      }
      //返回一个对象,对象中的内容,模板中可以直接使用
      return {username,age,newusername,message,addAge,subAge,changeName}
    }
}
</script>
<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button {
    margin: 0 5px;
  }
</style>